* { margin: 0; padding: 0; }
body { font: 14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: #333; color: #fff; }
a { outline: none; text-decoration: none; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../img/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../img/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#333; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../img/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
#background { background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
#player { 
	width: 300px; 
	height: 110px; 
	padding: 25px; 
	position: relative;
	float: left;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 }
 #player>span{
 	font-size: 20px;
 }
#player .cover { background: rgba(0, 0, 0, 0.5); border: 1px solid #333; position: absolute; top: 25px; left: 25px; overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px; -moz-box-shadow: 0 2px 10px black; -webkit-box-shadow: 0 2px 10px black; -o-box-shadow: 0 2px 10px black; box-shadow: 0 2px 10px black; }
#player .cover img { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; width: 130px; height: 130px; }
#player .ctrl { text-shadow: 0 1px 2px #000; line-height: 16px; }
#player .ctrl .tag strong, #player .ctrl .tag span { display: block; text-overflow: ellipsis; }
#player .ctrl .tag span { font-size: 12px; margin-top: 5px; color: #ccc; }
#player .ctrl .icon { background-repeat: no-repeat; background-position: center; display: inline-block; opacity: 0.6; cursor: pointer; width: 24px; height: 24px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
#player .ctrl .icon:hover, #player .ctrl .icon.enable { opacity: 1; }
#player .ctrl .icon:active { opacity: 0.3; }
#player .ctrl .control { margin-top: 10px; height: 25px; }
#player .ctrl .control .rewind { background-image: url(../img/rewind.png); }
#player .ctrl .control .playback { background-image: url(../img/play.png); }
#player .ctrl .control .playback.playing { background-image: url(../img/pause.png); }
#player .ctrl .control .fastforward { background-image: url(../img/fastforward.png); }
#player .ctrl .control .volume .mute { background-image: url(../img/volume.png); }
#player .ctrl .control .volume .mute.enable { background-image: url(../img/mute.png); }
#player .ctrl .control .volume .slider { margin-top: 11px; margin-left: 10px; width: 100px; }
#player .ctrl .progress { margin-top: 10px; }
#player .ctrl .progress .timer { font-size: 12px; color: #ccc; margin-top: 8px; }
#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle { background-position: center bottom; }
#player .ctrl .progress .repeat { background-image: url(../img/repeat.png); }
#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all { opacity: 1; }
#player .ctrl .progress .repeat.once { position: relative; }
#player .ctrl .progress .repeat.once:before { content: "1"; position: absolute; top: 3px; right: -2px; font-size: 8px; }
#player .ctrl .progress .shuffle { background-image: url(../img/shuffle.png); }
.slider { background: rgba(0, 0, 0, 0.3); height: 5px; position: relative; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset; }
.slider:hover a, .slider.enable a { opacity: 1; }
.slider a { background: #fff; margin-left: -2.5px; position: absolute; opacity: 0; width: 5px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }
.slider .loaded, .slider .pace { position: absolute; height: 100%; opacity: 0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
.slider .loaded { background: rgba(255, 255, 255, 0.1); }
.slider .pace { background: #258fb8; }
#playlist { background: rgba(0, 0, 0, 0.5); width: 280px;    height: 138px;
    margin-left: 20px; padding: 10px 15px; list-style: none; position: relative; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
#playlist li { color: #aaa; font-size: 12px; line-height: 46px;font-size: 26px; padding-left: 25px; cursor: pointer; text-overflow: ellipsis; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;     width: 41%;
    float: left;}
#playlist li:hover { color: #fff; }
#playlist li.playing { background: url(../img/playing.png) no-repeat 0 center; color: #fff; font-weight: bold; }
footer { position: relative; font-size: 12px; color: white; margin-top: 160px; text-shadow: 0 1px 2px #000; text-align: center; }
footer a { color: #fff; font-weight: bold; }
footer a:hover { text-decoration: none; }




/*author:cll,date:2017-08-04*/

.video-js .vjs-big-play-button {
	top: 180px;
	left: 130px;
}
.layui-layer-hui {
	top:45%;
    left: 45%;
}
.layui-layer-msg {
    min-width: 180px;
    border: 1px solid #D3D4D3;
    box-shadow: none;
    top:45%;
    left: 45%;
    color:#000;
}
.layui-layer-dialog {
    min-width: 260px;
    top:40%;
    left: 40%;
    color:#000;
}

 #frame {/*----------图片轮播相框容器----------*/  
            position: absolute; /*--绝对定位，方便子元素的定位*/  
            width: 240px;  
            height: 400px;  
            overflow: hidden;/*--相框作用，只显示一个图片---*/  
            border-radius:5px;  
        }   
        #photos img {  
            float: left;  
            width:240px;  
            height:400px; 
            opacity: 0.6; 
        }  
        #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
            position: absolute;z-index:9px;  
            width: calc(400px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
        }  
        .play{  
            animation: ma 40s ease-out infinite alternate;/**/  
        }  
        /*@keyframes ma {---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----  
            0%,20% {        margin-left: 0px;       }  
            25%,40% {       margin-left: -400px;    }  
            45%,60% {       margin-left: -800px;    }  
            65%,80% {       margin-left: -1200px;    }  
            85%,100% {      margin-left: -1600px;   } 
        }  */
        
        #direction{
            display: inline-block;
            background-color: #ffc271;
            height:50px;
            padding: initial;
        }
        #direction img{
        	height:50px;
        	width:50px;
        }
        .ul{
            width: 100%;
            height: 100%;
            background-color: #333;
            opacity: 0.8;
            text-align: center;
            position: relative;
        }
        .ul li{
            position: absolute;
            width: 65px;
            height: 65px;
            cursor: pointer;
        }
        .ul .li1{
            background: url("img/left.png");
            top: 60px;
            left: 40px;
        }
        .ul .li2{
            background: url("img/right.png");
            top: 60px;
            left: 140px;
        }
        .ul .li3{
            background: url("img/up.png");
            top: 20px;
            left: 90px;
        }
        .ul .li4{
            background: url("img/down.png");
            top: 107px;
            left: 90px;
        }
        .ul .li1:hover{
            background: url("img/left1.png");
        }
        .ul .li2:hover{
            background: url("img/right1.png");
        }
        .ul .li3:hover{
            background: url("img/up1.png");
        }
        .ul .li4:hover{
            background: url("img/down1.png");
        }
        
        

.main_fl{
	position: relative;
	width: 1000px;
	margin: 30px auto;
}
    
.video{
	padding: 20px 0 0 20px;
}
.articalMain marquee{
	height: 400px;
	width: 100%;
}.articalMain marquee p{
	font-size: 20px;
}
.time{
	position: absolute;
	top: -10px;
	left: 20px;
}
.startBtn,.stopBtn{
	float:left;
	margin:40px 20px !important;
}
.music{
	position: relative;
	width: 735px;
}
#playlist{
	
}
#playlist li{
	font-size: 20px;
	line-height: 30px;
}
/*上翻下翻*/
.nBtn,.pBtn,.sBtn{
	margin: 0px 22px;
}
.sBtn{
	min-width: 60px;
	padding: 15px 9px!important;
}
.tiplabel{
	display: block;
	font-size: 20px;
	margin-left: 180px;
	line-height: 54px;
}
.dir,.vBtn{
	padding: 15px 0px !important;
}
.addbtn{
	margin-left:310px !important;
}
